let dataList = [
    {
        id_index: 1101,
        name: '小王',
        chinses_score: 100,
        math_score: 80,
        english_score: 91,
        policy_score: 12,
        all: 283
    },
    {
        id_index: 1102,
        name: '小曾',
        chinses_score: 88,
        math_score: 87,
        english_score: 92,
        policy_score: 12,
        all: 279
    },
    {
        id_index: 1103,
        name: '小赵',
        chinses_score: 75,
        math_score: 20,
        english_score: 86,
        policy_score: 48,
        all: 229
    },
    {
        id_index: 1104,
        name: '小周',
        chinses_score: 65,
        math_score: 81,
        english_score: 83,
        policy_score: 15,
        all: 244
    }
]
let header = ['学号', '姓名', '语文', '数学', '英语', '政治', '总分', '操作']
// 设置头tr:Type-Array，setHeader()
// 设置内容th:Type-Array，initdata(dataList)
// 表格风格stylename:Type-String,
// 设置的分数范围：Type-numberArray 1.参数可以选择传最大值，可以传取值区间

let scoreArray = [150, 100, 100,100]
// let scoreArray = [[-50, 150], [-10, 100], [-20, 100], [-30, 100]]
var classNameList = []
var n = []
function inputdata(header, dataList, n, style, scoreArray) {
    setHeader(header)//设置标题头
    initdata(dataList)//渲染页面
    getNode(scoreArray)//点击事件，传递事件源
    removeIt()//删除事件
    setStyle(style)//设置样式
    uneditable(n, dataList)//第几列不能编辑
}
window.onload = function () {
    inputdata(header, dataList, n, "", scoreArray)
}
// 初始化头部
function setHeader(headerdata) {
    let tbodyheader = document.getElementsByTagName("thead")[0]
    let headerhtml = ''
    for (let i = 0; i < headerdata.length; i++) {
        headerhtml += `
        <th>${headerdata[i]}</th>
    `
    }
    tbodyheader.innerHTML = headerhtml
}
// 移出某一列的编辑操作
function uneditable(n, dataList) {
    // n是数组，设置哪些列不能编辑，dataList是数据，用来过滤
    let arr = []
    let elList = document.getElementsByName("grade")
    let one = elList.length / dataList.length
    for (let i = 0; i < one; i++) {
        arr.push(Array.from(elList)[i].className)
    }
    if (arr.length) {
        for (let j of n) {
            let setdisable = document.getElementsByClassName(arr[j - 3])
            for (let i = 0; i < setdisable.length; i++) {
                setdisable[i].setAttribute("editable", false)
            }
        }
    }
}
//初始化数据
function initdata(data) {
    let tbodyinner = document.getElementsByTagName("tbody")[0]
    tbodyinner.innerHTML = ""
    for (let i = 0; i < data.length; i++) {
        var tmp = `<tr>`
        for (let j = 0; j < Object.keys(data[0]).length; j++) {
            if (j >= 2 && j <= Object.keys(data[0]).length - 2) {
                td = `<td name="grade" class="${Object.keys(data[0])[j]}">${data[i][Object.keys(data[0])[j]]}</td>`
                classNameList.push(`${Object.keys(data[0])[j]}`)
            } else {
                td = `<td class="${Object.keys(data[0])[j]}">${data[i][Object.keys(data[0])[j]]}</td>`
            }
            tmp += td
        }
        tmp += `<td><button class="delete">删除</button></td></tr>`
        tbodyinner.innerHTML += tmp
    }
    removeIt()
}
// 绑定点击事件
function getNode(scoreArray) {
    let subject = document.getElementsByName("grade")
    for (let i = 0; i < subject.length; i++) {
        subject[i].onclick = function () {
            edit(this, scoreArray)
        }
    }
}
// 注册每个tr的删除事件
function removeIt() {
    let deletes = document.getElementsByClassName("delete")
    for (let i = 0; i < deletes.length; i++) {
        deletes[i].onclick = function () {
            dataList.splice(i, 1)
            initdata(dataList)
        }
    }
}
//鼠标 移入点
function edit(i, scoreArray) {
    let inputlen = document.getElementsByTagName('input').length
    let oldvalue = i.innerHTML
    let itemclass = i.className
    //清空内容
    if (inputlen == 0) {
        if (i.getAttribute("editable") == true || i.getAttribute("editable") == null) {
            i.innerHTML = ''
            //新增文本框
            let newinput = document.createElement("input")
            newinput.type = "number"
            newinput.value = oldvalue
            newinput.classList.add("newinpututClass")
            i.appendChild(newinput)
            newinput.select()
            //失去焦点事件
            newinput.onblur = function () {
                let setedval = newinput.value
                setedval = setedval || 0
                // 设置默认最大分数,后三个参数分别为语文，数学，英语
                let judgeResult = checkScore(itemclass, setedval, scoreArray)
                if (judgeResult == true) {
                    i.innerHTML = setedval
                    let total_score = 0
                    for (let k = 2; k < i.parentNode.childNodes.length - 2; k++) {
                        values = parseFloat(i.parentNode.childNodes[k].innerHTML)
                        total_score += values
                    }
                    i.parentNode.childNodes[i.parentNode.childNodes.length - 2].innerHTML = total_score
                } else {
                    document.getElementsByClassName("toast")[0].style = "display:block;animation: down 2s ease;"
                    this.select()
                    setTimeout(function () {
                        document.getElementsByClassName("toast")[0].style = "display:none"
                    }, 2000)
                }
            }
        }
    }
}
//判断输入分数是否满足条件
function checkScore(classType, score, maxScore) {
    let status = 0
    let subName = Array.from(new Set(classNameList))
    for (let i = 0; i < maxScore.length; i++) {
        if (classType == subName[i]) {
            if (maxScore[i] instanceof Array) {
                if (score <= maxScore[i][1] && score >= maxScore[i][0]) {
                    status = 1
                } else {
                    status = 0
                }
            }
            else {
                if (score <= maxScore[i] && score >= 0) {
                    status = 1
                } else {
                    status = 0
                }
            }
        }

    }
    return status
}
function setStyle(style) {
    style = style || "table-normal"
    table_style = document.getElementsByTagName("table")[0]
    table_style.className = style
}